<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="file" id="file">
    <img src="" alt="" id="img" width="100" height="100">
    <script>
        function putb64(pic, cb) {
            const length = -1
            var url = `http://up-na0.qiniup.com/putb64/${length}`;
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    cb(xhr.responseText)
                }
            }
            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-Type", "application/octet-stream");
            xhr.setRequestHeader("Authorization", "UpToken rRD9keXD_wjpvrfL6LB0l8A0puziw7zCU5ymbIUT:TLsVcQCqf6gHJMVKmZJw-fyAhR0=:eyJzY29wZSI6InNob3BpZnkiLCJkZWFkbGluZSI6MTYyMzM4NDAwNH0=");
            xhr.send(pic);
        }
        const file = document.getElementById('file')
        const imgEle = document.getElementById('img')
        file.onchange = function (e) {
            var img = file.files[0]
            if (img) {
                var url = URL.createObjectURL(img);
                var base64 = blobToDataURL(img, function (base64Url) {
                    putb64(base64Url.split('base64,')[1], (res)=>{
                        res = JSON.parse(res)
                        imgEle.src = 'https://spic.qn.cdn.imaiyuan.com/' + res.key
                    })
                })
            }
        }
        function blobToDataURL(blob, cb) {
            let reader = new FileReader();
            reader.onload = function (evt) {
                var base64 = evt.target.result
                cb(base64)
            };
            reader.readAsDataURL(blob);
        }
    </script>
</body>

</html>